<%@ page contentType="text/html;charset=utf-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport"
			  content="width=device-width, initial-scale=1, maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"/>
		<meta name="format-detection" content="telephone=no, email=no"/>
		<!-- 忽略页面中的数字识别为电话，忽略email识别 -->
		<meta name="applicable-device" content="mobile"/>
		<meta name="apple-mobile-web-app-title" content="标题"/>
		<!-- 添加到主屏后的标题（iOS 6 新增） -->
		<meta name="apple-mobile-web-app-capable" content="yes"/>
		<!-- 是否启用 WebApp 全屏模式 -->
		<meta name="HandheldFriendly" content="true"/>
		<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
		<meta name="keywords" content=""/>
		<meta name="description" content=""/>
		<meta name="author" content="">
		<title>特长申报</title>
		<link rel="stylesheet" type="text/css" href="<c:url value='/static/tcsb/css/mui.min.css'/>"/>
		<link href="<c:url value='/static/tcsb/css/mui.picker.css'/>" rel="stylesheet" />
		<link href="<c:url value='/static/tcsb/css/mui.poppicker.css'/>" rel="stylesheet" />
		<link type="text/css" rel="stylesheet" href="<c:url value='/static/tcsb/css/main.css'/>" />
		<!--自适应布局-->
		<script type="text/javascript" src="<c:url value='/static/tcsb/js/flexble.js'/>"></script>
		<link rel="stylesheet" href="<c:url value='/static/tcsb/css/common.css'/>" />
		<link rel="stylesheet" type="text/css" href="<c:url value='/static/weixin/css/kshwxbj/yulan.css'/>">
		<link rel="stylesheet" type="text/css" href="<c:url value="/static/tcsb/css/wxUploadPicture.css"/> ">
		<script src="<c:url value='/static/weixin/js/jquery-1.8.3.min.js'/>"></script>
		<script src="<c:url value="/static/weixin/js/kshwxbj/map.js"/> "></script>
		<script src="<c:url value="/static/weixin/js/wxUrl.js"/> "></script>
		<script src="<c:url value="/static/tcsb/js/wxUploadPicture.js"/> "></script>
		<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
		<script type="text/javascript" src="<c:url value='/static/weixin/js/kshwxbj/yulan.js'/>"></script>
		<script src="<c:url value='/static/weixin/js/FormValid.js'/>"></script>
		<script src="<c:url value='/static/weixin/js/jquery.form.min.js'/>"></script>
		<script src="<c:url value='/static/tcsb/js/mui.min.js'/>"></script>
		<script src="<c:url value='/static/tcsb/js/mui.picker.js'/>"></script>
		<script src="<c:url value='/static/tcsb/js/mui.poppicker.js'/>"></script>
		<script src="<c:url value="/static/tcsb/js/SfzhmCheck.js"/> "></script>
	</head>
	<body style="background: #fff;">
		<div class="tabs-box">
			<p class="hov">申报</p>
			<p>已申报</p>
		</div>
		<div class="tabs-cont-box">
			<div class="tabs-cont">
				<form id="applay" action="<c:url value='/api/tcsb/submit'/>" method="post" >
					<input type="hidden" id="photo1" name="photo1" value=""/>
					<input type="hidden" id="fjid" name="fjid" valid='required' errmsg="请选择分局"/>
					<input type="hidden" id="type" name="type" valid='required' errmsg="请选择特长标题"/>
					<p class="title">基本信息</p>
					<ul class="list">
						<li>
							<p>分局</p>
							<p id='showPickerOne' class="arrow-right">请选择分局</p>
						</li>
						<li>
							<p>部门</p>
							<p><input type="text" class="mui-input-clear" name="deptid" placeholder="请输入部门"  valid="isChinese|required" errmsg="请输入正确的中文部门|请输入部门" /></p>
						</li>
						<li>
							<p>姓名</p>
							<p><input type="text" class="mui-input-clear" name="name" placeholder="请输入姓名"  valid="isChinese|required" errmsg="请输入正确的中文姓名|请输入姓名" /></p>
						</li>
						<li>
							<p>身份证</p>
							<p><input type="text" class="mui-input-clear" name="sfz" id="sfz" placeholder="请输入身份证"  valid="required" errmsg="请输入身份证" /></p>
						</li>
						<li>
							<p>联系方式</p>
							<p><input type="text" class="mui-input-clear" name="ontactway" id="ontactway" placeholder="请输入联系方式" valid='required' errmsg="请输入联系方式" /></p>
						</li>
					</ul>
					<p class="title">特长</p>
					<ul class="list">
						<li>
							<p>标题</p>
							<p id='showPickerThree' class="arrow-right">请选择标题</p>
						</li>
					</ul>
					<p class="cont-title">证明</p>
					<textarea class="textarea-cont-box" name="info" maxlength="50" placeholder="请填写特长证明,不超过50个字" valid='required' errmsg="请输入内容"></textarea>
					<p class="title">图片上传<span>（最多上传3张，每张不超过2M）</span></p>
					<div class="upload-box">
						<div class="images-box" id="picshow">

						</div>
						<p class="upload-btn" onclick="chooseImg()"></p>
					</div>
					<p class="btn-box" id="sbbutn" onclick="sure();">提交</p>
				</form>
			</div>
			<div class="tabs-cont" style="display: none;">
				<ul class="list-two" id="content">

				</ul>
			</div>
			<!-- 选择弹窗 -->
			<div id='oneResult' class="ui-alert"></div>
			<div id='twoResult' class="ui-alert"></div>
			<div id='threeResult' class="ui-alert"></div>
		</div>
		<script type="text/javascript">
			(function(mui, doc) {
				$('.tabs-box p').on('click', function () {
					$(this).addClass('hov').siblings().removeClass('hov');
					$('.tabs-cont-box .tabs-cont').eq($(this).index()).show().siblings().hide();
				})
				mui.init();
				mui.ready(function() {
					/**
					 * 获取对象属性的值
					 * 主要用于过滤三级联动中，可能出现的最低级的数据不存在的情况，实际开发中需要注意这一点；
					 * @param {Object} obj 对象
					 * @param {String} param 属性名
					 */
					var _getParam = function(obj, param) {
						return obj[param] || '';
					};
					//普通示例
					function setSelect(data,idO,idT,value) {
						var userPicker = new mui.PopPicker();
						userPicker.setData(data);
						var showUserPickerButton = doc.getElementById(idO);
						var userResult = doc.getElementById(idT);
						showUserPickerButton.addEventListener('tap', function(event) {
							userPicker.show(function(items) {
								showUserPickerButton.innerText = items[0].text;
								doc.getElementById(value).value=items[0].value;
								if(value=="fjid"){
									//bmjson;
								}
								//返回 false 可以阻止选择框的关闭
								//return false;
							});
						}, false);
					}
					// 分局
					setSelect([{
						value: '苏州市局',
						text: '苏州市局'
					}, {
						value: '张家港市局',
						text: '张家港市局'
					}, {
						value: '常熟市局',
						text: '常熟市局'
					}, {
						value: '昆山市局',
						text: '昆山市局'
					}, {
						value: '太仓市局',
						text: '太仓市局'
					}, {
						value: '吴江分局',
						text: '吴江分局'
					}, {
						value: '园区分局',
						text: '园区分局'
					}, {
						value: '姑苏分局',
						text: '姑苏分局'
					}, {
						value: '吴中分局',
						text: '吴中分局'
					}, {
						value: '相城分局',
						text: '相城分局'
					}, {
						value: '虎丘分局',
						text: '虎丘分局'
					}, {
						value: '度假区分局',
						text: '度假区分局'
					}, {
						value: '公交分局',
						text: '公交分局'
					}, {
						value: '轨交分局',
						text: '轨交分局'
					}],'showPickerOne','oneResult','fjid')

					// 部门
					//setSelect(bmjson,'showPickerTwo','twoResult','deptid')
					// 标题
					setSelect([{
						value: '摄影',
						text: '摄影'
					}, {
						value: '视频拍摄',
						text: '视频拍摄'
					}, {
						value: '剪辑',
						text: '剪辑'
					}, {
						value: '平面设计',
						text: '平面设计'
					},{
						value: '写作',
						text: '写作'
					}, {
						value: '绘画',
						text: '绘画'
					}, {
						value: '书法',
						text: '书法'
					}, {
						value: '舞蹈',
						text: '舞蹈'
					},{
						value: '朗诵',
						text: '朗诵'
					}, {
						value: '声乐',
						text: '声乐'
					}, {
						value: '乐器',
						text: '乐器'
					}, {
						value: '其他',
						text: '其他'
					}],'showPickerThree','threeResult','type')
				});
			})(mui, document);
			var numPerPage;//每页条数
			var pageNum;//当前页数
			var total;//总数据量
			$(function(){
				loadData();
			});
			function loadData(){
				$.ajax({
					url:"<c:url value='/api/tcsb/getList'/>",
					type: "post",
					dataType: 'json',
					data: {
						pageNum: pageNum
					},
					success:function(resp){
						$("#more").remove();
						if (resp.succ && resp.data.list.length > 0) {

							total = resp.data.total;
							pageNum = resp.data.pageNum;
							numPerPage = resp.data.numPerPage;
							var data = resp.data.list;
							var htmlArr = "";
							for (var i = 0; i < data.length; i++) {
								if (data[i].zt == "0") {
									var zt="已申报";
								}
								if (data[i].zt == "1") {
									var zt="已通过";
								}
								if (data[i].zt == "9") {
									var zt="已驳回";
								}
								htmlArr += "<a onclick=\"detail('"+data[i].id+"');\"><li><p><span>"+data[i].type+"</span><span>"+data[i].createtime+"</span></p><p><span>"+zt+"</span></p></li></a>";
							}
							if (pageNum*numPerPage < total) {
								htmlArr+="<li onclick='getMore();' id='more'><p style='text-align: center;line-height: 25px;width: 100%;'>加载更多！</p></li>";
							}
							$("#content").append(htmlArr);
						}else{
							$("#content").append("<li><p style='text-align: center;line-height: 25px;width: 100%;'>暂无数据！</p></li>")
						}
					},
					error: function () {
						alert("加载失败");
					}
				});
			}
			var flag=true;
			function validateTel(){
				var fzrPhone=$("#ontactway").val();
				var isPhone = /^((\(\d{2,3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/;
				var isMobile = /^((\(\d{2,3}\))|(\d{3}\-))?(13|15|18|17)\d{9}$/;
				if(isMobile.test(fzrPhone)||isPhone.test(fzrPhone)){
					flag=true;
				}else{

					alert("请输入正确的手机号码");
					$("#ontactway").focus();
					flag=false;
				}
			}
			function sure() {
				var flag=true;
				flag=checkIdCard($("#sfz").val(),"身份证");
				if(flag==true){
					$("#photo1").val(picId.valueString());
					if (validator(document.getElementById("applay"))) {
						validateTel();
						if(flag==true){
							if($("#photo1").val()==""||$("#photo1").val()==null){
								alert("请上传图片！");
								return;
							}
							$("#applay").ajaxSubmit({
								dataType: "json",
								success: function (resp, status, xhr) {
									if (resp.succ) {
										alert(resp.msg);
										window.location.href = "<c:url value='/api/tcsb/tcsb'/>";
									} else {
										alert(resp.msg);
										//$("#sbbutn").disabled(false);
										$("#sbbutn").attr("disabled", false);
									}
								},
								beforeSend:function(){
									lockBg();
									$("#sbbutn").attr("disabled", true);
								},
								complete : function(XMLHttpRequest,status){
									unlockBg();
								},
								error:function (e)
								{
									//alert("error=="+e.responseText)
									$("#sbbutn").attr("disabled", false);
								}
							});
						}

					}
				}

			}

			function lockBg(){
				$("body").append("<div class='cover'><div class='onload'><i class='fa fa-spinner fa-pulse'></i><p style='color:black;'>正在加载，请等待</p></div></div>");
			}

			function unlockBg(){
				$('.cover').remove();
			}
			function getMore(){
				pageNum++;
				loadData();
			}
			function detail(id){
				window.location.href="<c:url value="/api/tcsb/detail"/>?id="+id;
			}
		</script>
	</body>
</html>